import React, { useEffect, memo } from 'react';
import { useDispatch } from "react-redux";

import { getTops } from "./store/actionCreators";

import LJTopRanking from "./c-cpns/top-ranking";
import LJRankingHeader from './c-cpns/ranking-header';
import LJRankingList from './c-cpns/ranking-list';
import {
    RankingWrapper,
    RankingLeft,
    RankingRight,
} from "./style";

export default memo(function LJRanking() {
    // redux
    const dispatch = useDispatch();

    // hooks
    useEffect(() => {
        dispatch(getTops());
    }, [dispatch])

    return (
        <RankingWrapper className="wrap-v2">
            <RankingLeft>
                <LJTopRanking />
            </RankingLeft>
            <RankingRight>
                <LJRankingHeader />
                <LJRankingList />
            </RankingRight>
        </RankingWrapper>
    )
})
